<template>
  <div>
    <div class="tol-map-btn mapMain" v-if="false" :class="{ pgshow: pgShow }">
      <div
        class="guanlu btn"
        @click="(_isLoadDat = !_isLoadDat), (_showGuanLu = false), (_showPD = false)"
        :class="[_isLoadDat ? ' guanlu btn_clieked' : '']"
      >
        <div class="guanlu-icon biaoqian"></div>
      </div>
      <div class="guanlu-tol iconshwit" v-show="_isLoadDat">
        <div class="guanlu-tol-div">
          <div
            class="guanlu-item"
            v-for="item in LaodDat"
            @click="_SetLoadDat(item)"
            :class="[item.isclick ? 'guanlu-item-ed' : '']"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="guanlu btn" @click="hEnableDaoLan" :class="[_enable ? 'guanlu btn_clieked' : '']">
        <div class="guanlu-icon fengxing"></div>
      </div>
      <div
        class="guanlu btn"
        @click="(_showPD = !_showPD), (_showGuanLu = false), (_isLoadDat = false)"
        :class="[_showPD ? 'guanlu btn_clieked' : '']"
      >
        <div class="guanlu-icon pediangui"></div>
      </div>
      <div class="peidian-tol" v-show="_showPD">
        <div class="guanlu-tol-div">
          <div class="guanlu-item" @click="_SetRLT" :class="[isSetRLT ? 'guanlu-item-ed' : '']">
            热图展示
          </div>
          <div
            class="guanlu-item"
            v-for="item in roomLit"
            @click="_SetToRoom(item)"
            :class="[item.isclick ? 'guanlu-item-ed' : '']"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="guanlu btn"
        @click="(_showGuanLu = !_showGuanLu), (_showPD = false), (_isLoadDat = false)"
        :class="[_showGuanLu ? ' guanlu btn_clieked' : '']"
      >
        <div class="guanlu-icon"></div>
      </div>
      <div class="guanlu-tol" v-show="_showGuanLu">
        <div class="guanlu-tol-div">
          <div class="guanlu-item" :class="[_tranClick ? 'guanlu-item-ed' : '']">
            <div class="toushibtn" @click="_SetTran">透视</div>
            <div class="more-btns -alltous">
              <div class="tran-val">
                <input type="range" v-model="dat_opacity" style="width: 100px" min="0" max="100" />
              </div>
            </div>
          </div>
          <div
            class="guanlu-item"
            @click="_SetHideTree"
            :class="[isHideTree ? 'guanlu-item-ed' : '']"
          >
            隐藏绿化
          </div>
          <!-- 	<div class="guanlu-item" @click="_SetHideBulidSe" :class="[!isHideBuildSe?'guanlu-item-ed':'']">隐藏宿舍
				</div> -->
          <div
            class="guanlu-item"
            @click="_SetHideBulid"
            :class="[isHideBuild ? 'guanlu-item-ed' : '']"
          >
            隐藏建筑
          </div>
          <div
            class="guanlu-item"
            @click="_SetHideDiMian"
            :class="[isHideDiMian ? 'guanlu-item-ed' : '']"
          >
            隐藏地面
          </div>
          <!-- <div class="guanlu-item" :class="[!_isHideDB?'guanlu-item-ed':'']">
					<div class="toushibtn" @click="_SetTranDB">透视地面</div>
					<div class="more-btns  -alltous">
						<div class="tran-val">
							<input type="range" v-model="dat_opacity_db" min="10" max="100" />
						</div>
					</div>
				</div> -->
          <div class="guanlu-item" @click="_SetXHS" :class="[isHideXHS ? 'guanlu-item-ed' : '']">
            消火栓
          </div>
          <div class="guanlu-item" @click="_SetSZ" :class="[isHideSZ ? 'guanlu-item-ed' : '']">
            市政
          </div>
          <div class="guanlu-item" @click="_SetJS" :class="[isHideJS ? 'guanlu-item-ed' : '']">
            给水
          </div>
          <div class="guanlu-item" @click="_SetGLTX" :class="[isHideGLTX ? 'guanlu-item-ed' : '']">
            管路特效
          </div>
        </div>
      </div>
      <div class="guanlu btn">
        <div class="tohome" @click="hToMainScene"></div>
        <!-- <div class="showBase tohome btn" :class="[_showBase ? 'showos' : 'hidos']"
					@click="_showBase = !_showBase"></div> -->
      </div>
      <div
        class="guanlu btn"
        @click="_showMap = !_showMap"
        v-show="!pgShow || !_isIndex"
        :class="[_showMap ? ' guanlu btn_clieked' : '']"
      >
        <div class="mapShowBg"></div>
        <!-- 	<div class="mmap mini"></div> -->
      </div>
      <div
        class="tol-map"
        :class="{ index: _isIndex && pgShow }"
        v-show="_showMap || (_isIndex && pgShow)"
      >
        <div class="mmap bg">
          <slot></slot>
          <div class="hsxdt-xz-bg">
            <div class="hsxdt-xz" @click="hToBuild('3#2')"></div>
            <div class="hsxdt-xz-1" @click="hToBuild('sxl_1#')"></div>
            <div class="hsxdt-xz-2" @click="hToBuild('sxl_2#')"></div>
          </div>
          <!-- 		<div class="hsxdt-xz-bg">
						<div class="hsxdt-xz-1#" @click="hToBuild('sxl_1#')"></div>
					</div>
					<div class="hsxdt-xz-bg">
						<div class="hsxdt-xz-2#" @click="hToBuild('sxl_2#')"></div>
					</div> -->
        </div>
      </div>
    </div>
  </div>
  <!-- 场景飞行 -->
  <!-- <el-scene-fly ref="scene_fly"></el-scene-fly> -->
</template>

<script setup>
import elSceneFly from './el-scene-fly.vue'
// import {
// 	fa
// } from "element-plus/es/locale";
import { computed, reactive, nextTick, onMounted, onUnmounted, ref, watch, toRefs } from 'vue'

import { useStore } from 'vuex'
// import { fa } from "element-plus/es/locale";
const store = useStore()
const dat_opacity = ref(0)
const dat_opacity_db = ref(0)
const scene_fly = ref(null)
const { pgShow, datFlos, isBuild, scene3d, _enable } = toRefs(store.state)

const _isIndex = computed(() => store.state.pgCurrent == 'index')

const _showMap = ref(false)
const _showGuanLu = ref(false)
const _showPD = ref(false)

const _showBase = ref(false)

const _tranClick = ref(false)

const _isLoadDat = ref(false)
const roomLit = ref([
  {
    name: '大剧院',
    label: 'dajuyuan',
    isclick: false
  },
  {
    name: '实训楼',
    label: '3#2',
    isclick: false
  },
  {
    name: '食堂',
    label: 'shitang',
    isclick: false
  },
  {
    name: '宿舍楼',
    label: 'sushelou',
    isclick: false
  },
  {
    name: '体育馆',
    label: 'tiyuguan',
    isclick: false
  },
  {
    name: '行政楼',
    label: 'xingzhenglou',
    isclick: false
  }
])

const LaodDat = ref([
  {
    name: '楼宇',
    typeId: 72,
    modelType: 327,
    isclick: false
  },
  {
    name: '监控',
    typeId: 1,
    modelType: -1,
    isclick: true
  },
  {
    name: '能耗',
    typeId: 12,
    modelType: -1,
    isclick: false
  },
  {
    name: '空调',
    typeId: 43,
    modelType: -1,
    isclick: false
  }
])

const _SetLoadDat = (dat) => {
  dat.isclick = !dat.isclick
  window.s3d.DeviceRelPosEnable({
    enable: dat.isclick,
    typeId: dat.typeId,
    modelType: dat.modelType
  })
}

//场景飞行
const hEnableDaoLan = () => {
  _enable.value = !_enable.value
  console.log('飞行', _enable.value)
  _showPD.value = false
  _showGuanLu.value = false
  _isLoadDat.value = false
}
const _SetToRoom = (dat) => {
  window.s3d.DeviceRelPosEnable({
    enable: false,
    typeId: 72,
    modelType: 340
  })
  roomLit.value.map((t) => {
    t.isclick = false
  })
  if (isSetRLT.value) {
    isSetRLT.value = false
    window.s3d.SetPDRoomHeatMap(isSetRLT.value)
  }
  dat.isclick = !dat.isclick
  window.s3d.SetCamToRoom({
    roomNumber: dat.label,
    height: 10,
    distance: 20,
    speed: 5
  })

  setTimeout(() => {
    window.s3d.DeviceRelPosEnable({
      enable: true,
      typeId: 72,
      modelType: 340
    })
    window.s3d.SetUpdateModPos()
  }, 1500)
}
// 透视
const _SetTran = () => {
  _tranClick.value = !_tranClick.value
  var f = _tranClick.value == true ? 100 : 0
  dat_opacity.value = f
  window.s3d.SetOpacity(f)
}
//地板透明
const _isHideDB = ref(false)
const _SetTranDB = () => {
  _isHideDB.value = !_isHideDB.value
  var f = _isHideDB.value == true ? 100 : 10
  window.s3d.SetDianMianOpacity(f)
}

const isHideTree = ref(true)
//隐藏绿化
const _SetHideTree = () => {
  isHideTree.value = !isHideTree.value
  window.s3d.SetTreeState(isHideTree.value)
}

const isHideBuild = ref(true)
//隐藏建筑
const _SetHideBulid = () => {
  isHideBuild.value = !isHideBuild.value
  window.s3d.SetBuildState(isHideBuild.value)
  if (isHideBuild.value == false && isHideDiMian.value == false) {
    window.s3d.SetXiaoFangShuanState(true)
  } else {
    window.s3d.SetXiaoFangShuanState(false)
  }
}

const isHideBuildSe = ref(true)
//隐藏建筑
const _SetHideBulidSe = () => {
  isHideBuildSe.value = !isHideBuildSe.value
  window.s3d.SetHidNewShuShe(isHideBuildSe.value)
}
// 隐藏地面
const isHideDiMian = ref(true)
const _SetHideDiMian = () => {
  isHideDiMian.value = !isHideDiMian.value
  window.s3d.SetOtherState(isHideDiMian.value)

  if (isHideBuild.value == false && isHideDiMian.value == false) {
    window.s3d.SetXiaoFangShuanState(true)
  } else {
    window.s3d.SetXiaoFangShuanState(false)
  }
}
//  消火栓
const isHideXHS = ref(false)
const _SetXHS = () => {
  isHideXHS.value = !isHideXHS.value
  window.s3d.SetGuanLuState({
    number: 'RED-GD',
    state: isHideXHS.value
  })
}
//  市政
const isHideSZ = ref(false)
const _SetSZ = () => {
  isHideSZ.value = !isHideSZ.value
  window.s3d.SetGuanLuState({
    number: 'GREEN-GD',
    state: isHideSZ.value
  })
  console.log('状态：', !isHideBuild.value)
  window.s3d.SetXiaoFangShuanState(!isHideBuild.value)
}
//
const isHideJS = ref(false)
const _SetJS = () => {
  isHideJS.value = !isHideJS.value
  window.s3d.SetGuanLuState({
    number: 'YELLOW-GD',
    state: isHideJS.value
  })
}
const isHideGLTX = ref(false)
const _SetGLTX = () => {
  isHideGLTX.value = !isHideGLTX.value
  window.s3d.SetGuanLuTXState(isHideGLTX.value)
}

// 热图
const isSetRLT = ref(false)
const _SetRLT = () => {
  window.s3d.DeviceRelPosEnable({
    enable: false,
    typeId: 72,
    modelType: 340
  })
  roomLit.value.map((t) => {
    t.isclick = false
  })

  isSetRLT.value = !isSetRLT.value
  window.s3d.SetPDRoomHeatMap(isSetRLT.value)
  if (!isSetRLT.value) {
    hToMainScene()
    //window.s3d.SetToHome();
  } else {
    window.s3d.FlyTo({
      ID: 36582,
      scondes: 0,
      height: 500,
      distance: 50
    })
    setTimeout(() => {
      window.s3d.DeviceRelPosEnable({
        enable: true,
        typeId: 72,
        modelType: 340
      })

      window.s3d.SetUpdateModPos()
    }, 3500)
  }
}

//属性定义
const props = defineProps({
  _changed: {
    type: Function
  }
})

watch(_showBase, (v) => {
  window.s3d.SetBaseShow(v)
})

const hToMainScene = () => {
  store.state.isBuild = false
  isSetRLT.value = false
  window.s3d.SetPDRoomHeatMap(isSetRLT.value)
  props._changed()
  window.s3d.SetToHome()
  window.s3d.SetOpacity(0)
  //window.s3d.SetDianMianOpacity(0);
  sendMessagToD('home')
  _isHideDB.value = false
  isHideTree.value = true
  isHideBuild.value = true
  isHideDiMian.value = true
  isHideXHS.value = false
  isHideSZ.value = false
  isHideJS.value = false
  isHideGLTX.value = false
  isSetRLT.value = false
  _tranClick.value = false
  _showPD.value = false
  _showGuanLu.value = false
  _isLoadDat.value = false
  _showMap.value = false
  roomLit.value.map((t) => {
    t.isclick = false
  })
  window.s3d.SetTreeState(isHideTree.value)

  setTimeout(() => {
    window.s3d.SetUpdateModPos()

    window.s3d.DeviceRelPosEnable({
      enable: false,
      typeId: 72,
      modelType: 340
    })
  }, 800)
}

const hToBuild = (b) => {
  props._changed()
  window.s3d.SetBuild(b)
  sendMessagToD(b)
}

const sendMessagToD = (data) => {
  console.log('向D+发送数据', data)
  window.parent &&
    window.parent.postMessage(
      {
        type: 'iframe_type2',
        data: JSON.stringify(data || '')
      },
      '*'
    )
}
//透视
watch(dat_opacity, (v) => {
  window.s3d.SetOpacity(v)
  //console.log("opacity:" + v);
})

//地板透视
watch(dat_opacity_db, (v) => {
  window.s3d.SetDianMianOpacity(v)
})
// watch(scene_fly.value._enable,(b)=>{
// 	isfeixin.value =b;
// })
// defineExpose({
// 	hToBuild ,
// });

const hRefPage = () => {}
onUnmounted(() => {})

onMounted(() => {
  nextTick(() => {
    hRefPage()
  })
})
</script>

<style scoped>
.iconshwit {
  height: 145px !important;
  top: -95px !important;
}

.-alltous {
  position: absolute;
  right: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  width: 120px;
  justify-content: flex-end;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  background: linear-gradient(180deg, rgba(1, 58, 124, 0.6), rgba(0, 92, 199, 0.6));
}

.toushibtn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapMain {
  margin-right: 460px;
}

* {
  color: #eee;
  -ms-user-select: none;
  user-select: none;
}

.mphome {
  position: relative;
}

.tohome {
  background: none;
  width: 50px;
  height: 50px;
  position: relative;
  background-image: url(/imgs/guanlu/home.png);
  background-size: 47%;
  background-repeat: no-repeat;
  background-position: center;
}

.showBase {
  position: absolute;
  top: 0;
  left: -15px;
  z-index: 0;
}

.mmap.home {
  position: relative;
  z-index: 1;
}

.tol-map {
  width: 350px;
  height: 330px;
  position: absolute;
  transition: all 0.5s;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: flex-end;
  transform: translate(-55%, 0);
}

.guanlu-tol {
  width: 110px;
  height: 300px;
  position: absolute;
  transition: all 0.5s;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: flex-end;
  transform: translate(-55%, 0);
  right: 18px;
  top: -90px;
  flex-direction: column;
  background-color: #18567ead;
  border: 1px solid #105fa0;
}

.biaoqian {
  background-image: url(/imgs/guanlu/bq.png) !important;
}

.guanlu-tol-div {
  width: 85%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}

.peidian-tol {
  width: 110px;
  height: 250px;
  position: absolute;
  transition: all 0.5s;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: flex-end;
  transform: translate(-55%, 0);
  right: 18px;
  top: -90px;
  flex-direction: column;
  background-color: #18567ead;
  border: 1px solid #105fa0;
}

.pediangui {
  background-image: url(/imgs/guanlu/pdg.png) !important;
}

.fengxing {
  background-image: url(/imgs/guanlu/fx.png) !important;
}

.guanlu-item {
  display: flex;
  width: 100%;
  height: 30px;
  background-image: url(/imgs/guanlu/guanlu-def.png);
  align-items: center;
  justify-content: center;
}

.guanlu-item:hover {
  transform: scale(1.1);
}

.guanlu-item-ed {
  background-image: url(/imgs/guanlu/guanlu-ed.png);
}

.tol-map.index {
  transform: translate(74%, 0);
}

.tol-map-btn {
  width: 80px;
  height: 330px;
  right: 200px;
  position: absolute;
  bottom: 1em;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 101;
  justify-content: space-around;
  top: 0;
}

.guanlu {
  background: none;
  width: 50px;
  height: 50px;
  position: relative;
  background-image: url(/imgs/bg/bj30.png);
  background-size: 95%;
  background-repeat: no-repeat;
}

.guanlu-icon {
  background: none;
  width: 50px;
  height: 50px;
  position: relative;
  background-image: url(/imgs/guanlu/guandao.png);
  background-size: 47%;
  background-repeat: no-repeat;
  background-position: center;
}

.tol-map-btn.pgshow {
  /* right: var(--aside-w); */
}

.mapShow {
  width: 50px;
  height: 50px;
  position: relative;
  margin-top: 15px;
}

.mapShow > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

.btn_clieked {
  background-image: url(/imgs/bg/bj30-1.png) !important;
}

.mapShowBg {
  background: none;
  width: 50px;
  height: 50px;
  position: relative;
  background-image: url(/imgs/guanlu/minmap.png);
  background-size: 47%;
  background-repeat: no-repeat;
  background-position: center;
}

.mmap.mini {
  scale: 0.6;
  bottom: 14px;
  left: 3px;
}

@keyframes rot360 {
  0% {
  }

  50% {
  }

  100% {
  }
}

/* 小地图背景 */
.map-bg {
  width: 66%;
  height: 74%;
  border-radius: 2px;
  overflow: hidden;
}

.hsxdt-xz-bg {
  background-image: url(/imgs/map/map.jpg);
  height: 100%;
  width: 78%;
  background-size: 100% 75%;
}

.hsxdt-xz {
  background-image: url(/imgs/map/3.png);
  height: 82px;
  background-size: 22%;
  margin-top: 27px;
  margin-left: -28px;
}

.hsxdt-xz:hover {
  background-size: 25%;
}

.hsxdt-xz-1 {
  background-image: url(/imgs/map/1.png);
  height: 82px;
  width: 50px;
  background-size: 85%;
  margin-top: -8px;
  margin-left: 68px;
}

.hsxdt-xz-1:hover {
  background-size: 90%;
}

.hsxdt-xz-2 {
  background-image: url(/imgs/map/2.png);
  height: 82px;
  width: 50px;
  background-size: 75%;
  margin-top: -81px;
  margin-left: 124px;
}

.hsxdt-xz-2:hover {
  background-size: 80%;
}
</style>
